<template>
	<view>
		<scroll-view scroll-y>
			<view class="block__title" v-if="fees.length > 0">待付款费用</view>
			<view class="cu-list menu" v-for="(item,index) in fees" :key="index" :data-item="item">
				<view class="cu-item">
					<view class="content padding-tb-sm">
						<view>
							<view class="text-cut" style="width:220px">{{item.feeName}}</view>
						</view>
						<view class="text-gray text-sm">
							<text class="margin-right-xs">应缴:￥{{item.price}}</text>
						</view>
					</view>
					<view class="action">
						<text class="text-grey text-sm">实收:￥{{item.payPrice}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-if="fees.length > 0" class="bg-white  border flex justify-end"
			style="position: fixed;width: 100%;bottom: 0;">
			<view class="action text-orange margin-right line-height">
				合计：{{amount}}元
			</view>
			<view class="btn-group">
				<button class="cu-btn bg-red shadow-blur lgplus sharp" @click="subOrder()">提交订单</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStoreOrderCartFees,
		toServFeePay,
		toPayServ
	} from '../../api/order/orderApi.js'
	import {
		toPay
	} from '../../api/pay/payApi.js';

	import {
		getUserId
	} from '../../api/user/userApi.js'

	export default {
		data() {
			return {
				amount: 0,
				fees: [],
				cartId: '',
				shopId: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
	 async onLoad(options) {
		 await this.vc.onLoad(options).then(_suc=>{},_err=>{});
			let _that = this;

			//校验 是否已经获取用户openId
			this.vc.hasUserOpenId();
			this.cartId = options.cartId;
			this.shopId = options.shopId;
			_that._loadFees();
		},
		methods: {
			_loadFees: function() {
				let _that = this;
				let _objData = {
					cartId: this.cartId,
					shopId: this.shopId,
					state: 1001,
					page: 1,
					row: 50
				}
				getStoreOrderCartFees(_objData)
					.then(function(_fees) {
						_that.fees = _fees;
						return _fees;
					}, function(error) {
						uni.showToast({
							icon: 'none',
							title: '没有欠费信息'
						})
					})
					.then(function(_fees) {
						_fees.forEach(function(_item) {
							_that.amount += parseFloat(_item.payPrice);
						})
						_that.amount = _that.amount.toFixed(2);
					})
			},
			subOrder: function() {
				let that = this;
				wx.showLoading({
					title: '支付中'
				});
				let _tradeType = 'APP';
				// #ifdef H5 || MP-WEIXIN
				_tradeType = 'JSAPI';
				// #endif
				
				let _data = {
					cartId: this.cartId,
					shopId: this.shopId,
					tradeType: _tradeType,
					personId: getUserId()
				};
				
				toPay(_data, 'buyServUnPayFee', this.shopId,this.amount,'/pages/order/order?stat=4004');
			},
		}
	};
</script>
<style>
	.ppf_item {
		padding: 0rpx 0rpx 0rpx 0rpx;
	}

	.block__title {
		margin: 0;
		font-weight: 400;
		font-size: 14px;
		color: rgba(69, 90, 100, .6);
		padding: 40rpx 30rpx 20rpx;
	}

	.button_up_blank {
		height: 40rpx;
	}

	.block__bottom {
		height: 180rpx;
	}

	.fee-last {
		margin-bottom: 200upx;
	}

	.cu-btn.lgplus {
		padding: 0 20px;
		font-size: 18px;
		height: 100upx;

	}

	.cu-btn.sharp {
		border-radius: 0upx;
	}

	.line-height {
		line-height: 100upx;
	}
</style>
